<!--
 * @Date: 2021-10-18 16:42:12
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-11-30 16:49:20
 * @FilePath: \tianjushi-kanban\src\components\text\BookMarkText1.vue
--> 
<template>

<div class="roomlist-col-md2">   
      <h1 class="roomlist_title roomlist_title3">
        <i>
		  <House/> 
        </i>&nbsp{{title}}
      </h1>
      <div class="roomlist_content roomlist_content3">
        <h1 ref="divRef" style="width:98%; height:98%;  background-image: linear-gradient(to right, rgb(234, 75, 53), rgb(245, 128, 77)); color: rgb(252, 252, 252);margin:0px auto">
            <i style="vertical-align:middle">
		        <Exclamation :style="{color:bgcolor}"/>			
		     </i>&nbsp待清场	
	    </h1>
      </div>
   </div> 	
</template>

<script>
import {ref, onMounted,onUnmounted,reactive,toRefs} from 'vue'
import config from "@/core/tools/config";
import Exclamation from "@/component/board/icons/Exclamation.vue";
import House from "@/component/boards/icons/House.vue";

export default({
  name: "FunctionText",
  components:{
	  Exclamation,
	  House
  },

  props:{
	  title:{
		  type:String,
		  default:"功能间"
	  }

  },
  
  setup() {
    const data = reactive({
      bgcolor:"",
    });

  const divRef = ref(null);
	let colorflag = 0;

	
	function shanshuo() {
    let div = divRef.value;     
		if (!colorflag) {
          div.style['background-image'] = "linear-gradient(to right , #EA4B35, #f5804d)";
        	div.style.color = "#fcfcfc";
							
			colorflag = 1;
		} else {	
			div.style['background-image'] = "";
			div.style.color = "";
				
			colorflag = 0;
		}		
	}

   const timer = setInterval(() => {
        shanshuo();
    }, 500);  

    onUnmounted(() => {
        clearInterval(timer);
    });
    
    onMounted(() => {      
		shanshuo();	
    })
    
    return {
      divRef,
	   ...toRefs(data), 
    }
  }
})
</script>
<style>

</style>